import {Canvas, Meta} from '@storybook/blocks'

import * as MarketingLayoutStories from './MarketingLayout.stories'

<Meta of={MarketingLayoutStories} />

# Marketing layout

## Position elements with spacing utilities

Position elements from all four element edges (`top`, `right`, `bottom`, and `left`) using any spacing utility from the global spacing scale and the marketing spacing scale (from `$spacer-1` to `$spacer-12`), including negative and 0 values.

Use these with `.position-absolute` to position decorative assets and shapes on marketing sites.

In an effort to reduce the size of our CSS, responsive breakpoints are only supported for `md` and `lg` breakpoints. **There is no support for `sm` and `xl` breakpoints.**

<Canvas of={MarketingLayoutStories.Positions} />

## Negative offset columns

Using column offset classes can pull a div over X number of columns to the left. Negative offsets are available in spacings from 1 to 7.

<Canvas of={MarketingLayoutStories.Offset} />
